<template>
  <div class="zoom">
    <el-header>
      <!-- <el-row class=""> -->
      <!-- <el-col :span="3"></el-col> -->
      <!-- <el-image :src="require('@/assets/images/newlogo1.jpg')"></el-image> -->

      <!-- <div class="logo">.</div> -->

      <!-- </el-row> -->
      <el-row class="el-row1">
        <el-col :span="7">
          <el-image :src="require('@/assets/images/新UI1.png')"></el-image>
        </el-col>
        <el-col :span="3">
          <el-image :src="require('@/assets/images/新UI4.png')"></el-image>
        </el-col>
        <el-col :span="14" class="navimage">
          <el-row>
            <el-col :span="16">
              <el-menu
                :default-active="activeIndex+' '"
                class="el-menu-demo"
                mode="horizontal"
                background-color="#002B26"
                text-color="#fff"
                active-text-color="#ffd04b"
              >
                <el-menu-item index="1" @click="routertoinfo()" class="shouye">
                  <!-- 首页 -->
                  <font class="fontnav">&nbsp&nbsp&nbsp&nbsp首&nbsp页 &nbsp</font>
                </el-menu-item>
                <el-submenu index="2">
                  <!-- 系统总览 -->
                  <template slot="title">
                    <font class="fontnav">系统总览</font>
                  </template>
                </el-submenu>

                <el-submenu index="3">
                  <template slot="title">
                    <font class="fontnav">运行监控</font>
                  </template>
                </el-submenu>
                <el-submenu index="4">
                  <template slot="title">
                    <font class="fontnav">能量管理</font>
                  </template>
                </el-submenu>

                <el-submenu index="5">
                  <template slot="title">
                    <font class="fontnav">综合分析</font>
                  </template>
                </el-submenu>
                <el-submenu index="6">
                  <template slot="title">
                    <font class="fontnav">系统管理</font>
                  </template>
                </el-submenu>
              </el-menu>
            </el-col>
            <el-col :span="8">
              <el-image
                @click=" logout()"
                class="headerimage"
                :src="require('@/assets/images/新UI9.png')"
              ></el-image>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row>
        <el-image :src="require('@/assets/images/新UI20.png')"></el-image>
      </el-row>
      <!-- <el-divider></el-divider> -->
    </el-header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',

      activeName: 'first'
    }
  },

  props: {
    props: {
      type: Object,
      require: true
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    logout() {
      // 子组件中触发父组件方法ee并传值cc12345
      this.$emit('ee', 'true')
    },
    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    },
    routertoruncontroller() {
      this.$router.push({ path: '/operationmonitoring/runcontroller' })
    },
    routertoinfo() {
      this.$router.push({ path: '/home' })
    },
    routertodatepick() {
      this.$router.push({ path: '/datepicker' })
    },
    routertoindex2() {
      this.$router.push({ path: '/indexx' })
    },
    routertoEquipmentbasicdata() {
      this.$router.push({ path: '/systemoverview/workspace' })
    },
    routertoCharactInfo() {
      this.$router.push({ path: '/systemoverview/powercurve' })
    },
    //  运维信息
    routertoOperaInfo() {
      this.$router.push({ path: '/systemoverview/operationparameters' })
    },
    routertoexample() {
      this.$router.push({ path: '/systemoverview/example' })
    },
    //  networkdata
    routertosystemstructure() {
      this.$router.push({ path: '/systemoverview/systemstructure' })
    },
    //  weather
    routertoweather() {
      this.$router.push({ path: '/workspacecopy' })
    },
    //  netcharactinfo
    routertonetcharactinfo() {
      this.$router.push({ path: '/systemoverview/environmentalmonitoring' })
    },
    //netoperainfo
    routertonetoperainfo() {
      this.$router.push({ path: '/systemoverview/systemoperatingmode' })
    },
    routertoalarm() {
      this.$router.push({ path: '/systemoverview/alarmmanagement' })
    },
    routertoequipmentReport() {
      this.$router.push({ path: '/equipmentreport' })
    },
    routertonetworkReport() {
      this.$router.push({ path: '/networkreport' })
    },
    routertousermanage() {
      this.$router.push({ path: '/systemmanagement/usermanagement' })
    },
    routertoauthority() {
      this.$router.push({ path: '/authority' })
    },
    routertodatainterface() {
      this.$router.push({ path: '/datainterface' })
    },
    routertodataprepro() {
      this.$router.push({ path: '/dataprepro' })
    },
    routertodecision() {
      this.$router.push({ path: '/decision' })
    },
    routertodiscuss() {
      this.$router.push({ path: '/discuss' })
    },
    routertomodelmanager() {
      this.$router.push({ path: '/modelmanager' })
    },
    routertosampling() {
      this.$router.push({ path: '/sampling' })
    },
    routertopcc() {
      this.$router.push({ path: '/operationmonitoring/pcc' })
    },
    routertowindpowersystem() {
      this.$router.push({ path: '/operationmonitoring/windpowersystem' })
    },
    routertopvsystem() {
      this.$router.push({ path: '/operationmonitoring/pvsystem' })
    },
    routertodieselsystem() {
      this.$router.push({ path: '/operationmonitoring/dieselsystem' })
    },
    routertostoragesystem() {
      this.$router.push({ path: '/operationmonitoring/storagesystem' })
    },
    routertoloadsystem() {
      this.$router.push({ path: '/operationmonitoring/loadsystem' })
    },
    routertomonitoring() {
      this.$router.push({ path: '/operationmonitoring/monitoring' })
    },
    routertopowerforecasting() {
      this.$router.push({ path: '/energymanagement/powerforecasting' })
    },
    routertoenergymanagement() {
      this.$router.push({ path: '/energymanagement/energymanagement' })
    },
    routertodatacollection() {
      this.$router.push({ path: '/systemmanagement/datacollection' })
    },
    routertofuelmanagement() {
      this.$router.push({ path: '/energymanagement/fuelmanagement' })
    },
    routertostateofrepair() {
      this.$router.push({ path: '/energymanagement/stateofrepair' })
    },
    routertonuclearpowerstate() {
      this.$router.push({ path: '/energymanagement/nuclearpowerstate' })
    },
    routertopowermanagement() {
      this.$router.push({ path: '/energymanagement/powermanagement' })
    },
    routertoloadmanagement() {
      this.$router.push({ path: '/energymanagement/loadmanagement' })
    },
    routertoloadclassmanagement() {
      this.$router.push({ path: '/energymanagement/loadclassmanagement' })
    },
    routertopowergenerationplan() {
      this.$router.push({ path: '/energymanagement/powergenerationplan' })
    },
    routertopoweranalysis() {
      this.$router.push({ path: '/systemoverview/poweranalysis' })
    },
    routertoreport() {
      this.$router.push({ path: '/systemmanagement/report' })
    },
    routertocoulometry() {
      this.$router.push({ path: '/comprehensiveanalysis/coulometry' })
    },
    routertoenergyconsumptionanalysis() {
      this.$router.push({
        path: '/comprehensiveanalysis/energyconsumptionanalysis'
      })
    },
    routertoenergypriceinfo() {
      this.$router.push({ path: '/comprehensiveanalysis/energypriceinfo' })
    },
    routertoenrgyefficiencyanalysis() {
      this.$router.push({
        path: '/comprehensiveanalysis/enrgyefficiencyanalysis'
      })
    },
    routertoloadanalysis() {
      this.$router.push({ path: '/comprehensiveanalysis/loadanalysis' })
    },
    routertotradeinfo() {
      this.$router.push({ path: '/comprehensiveanalysis/tradeinfo' })
    }
  }
}
</script>
<style lang="scss">
// 如果同一个页面中出现有的需要使用scoped,有的不需要可以使用两个style分别设置
.el-menu--horizontal > .el-submenu > .el-submenu__title {
  height: 5.15rem;
  // width:10.17rem;
  background-image: url(../assets/images/新UI7.png);
  //    background-repeat:no-repeat;
  background-size: 100% 100%;
  // background-color:white;
}
.el-header {
  // background-color:#015659;
  // background-color: #005b5c;
  background-image: url(../assets/images/新UI10.png);
  // background-repeat:no-repeat;
  //  background-size:100%;
  // display:  flex;
  align-items: center;
  height: 9%;
  margin-bottom: 5%;
  padding-left: 0px;
  padding-right: 0px;
}
</style>
<style lang="scss" scoped>
.zoom {
}

.fontnav {
  font-size: 15.4px;
  color: #a1fedb;
}
.navimage {
  // background-image: url(../assets/images/新UI3.png);
}

.shouye {
  // background-image: url(../assets/images/新UI8.png);
  width: 10.75rem;
  height: 5.15rem;
  background-image: url(../assets/images/新UI7.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.shouye1 {
  background-image: url(../assets/images/新UI9.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.el-menu.el-menu--horizontal {
  // border-bottom: solid 0px #e6e6e6;
  border-bottom: solid 0px #256768;
}

.el-row {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.el-col {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.el-row1 {
  background-color: white;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;

  background-image: url(../assets/images/新UI10.png);
}
.headerimage {
  height: 6.25rem;
}
// .title {
//   color: #0d1a26;
//   font-weight: 600;
//   padding: 0.05rem 0.15rem;
//   border-bottom: 1px solid #ccc;
// }

// .group {
//   margin: 0.1rem 0 0.2rem 0.3rem;
//   padding: 0;

//   a,
//   li {
//     line-height: 2;
//   }

//   li {
//     list-style: initial;
//   }
// }

// .bottom {
//   position: absolute;
//   bottom: 0.1rem;
// }

// .items {
//   padding: 0.05rem 0.15rem;

//   .el-input-number {
//     width: initial;
//     line-height: 0.32rem;

//     .el-input__inner {
//       padding-left: 0;
//       height: 0.34rem;
//       line-height: 0.34rem;
//     }

//     .el-input-number__increase {
//       line-height: 0.16rem;
//     }
//   }
// }

// .formItem {
//   margin-bottom: 0.1rem;
// }
</style>
